<template>
    <div class="container">
        <div class="tab" :style="{background:color}">
            {{text}}
            <div class="triangle1" :style="{borderColor:triangle1}"></div>
            <div class="triangle2" :style="{borderColor:triangle2}"></div>
        </div>
    </div>
</template>

<script type="text/ecamscript-6">
export default {
    props: {
        color: {
            type: String,
            default: "#000"
        },
        text: {
            type: String,
            default: "标签"
        }
    },
    computed:{
        triangle1(){
            return `${this.color} transparent transparent ${this.color}`
        },
        triangle2(){
            return `transparent transparent ${this.color} ${this.color}`
        }
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.tab
    color #ffffff
    font-size 11px
    height 22px
    line-height 22px
    display inline-block
    position relative
    padding 0 6px
    .triangle1
        position absolute
        top 0
        right -11px
        width 0
        height 0
        border-width 6px
        border-style solid
    .triangle2
        position absolute
        top 10px
        right -11px
        width 0
        height 0
        border-width 6px
        border-style solid
</style>
